<template>
  <view class="list">
    <view class="search">
      <search-bar
        :show-btn="false"
        disabled
        type="team"
      />
      <my-tablist
        :category-list="categoryList"
        default-tab="全部"
        @change="changeTab"
      />
    </view>
    <ul class="card">
      <li
        v-for="item in list"
        :key="item.id"
        @click="$jumpUrl(`/productPages/team/productDetail?id=${item.goodsId}`)"
      >
        <view class="card_left">
          <image
            :src="item.logoImage"
            class="img"
            mode="aspectFill"
          />
        </view>
        <view class="card_right">
          <view class="title-flex">
            <view class="title title-line-clamp">
              {{ item.name }}
            </view>
            <view
              v-if="item.distance"
              class="distance"
            >
              {{ item.distance }}km
            </view>
          </view>
          <view class="flex">
            <view
              v-for="(tag, index) in item.tagList"
              :key="index"
              class="tagList"
            >
              <view class="item">
                {{ tag.name }}
              </view>
            </view>
          </view>
          <view class="flex detail-bottom">
            <view
              v-show="item.price"
              class="start-price"
            >
              {{ item.price }}
							<span style="font-size: 20rpx;">/{{detail.salesUnit || '人'}}</span>
            </view>
            <view class="font-11">
              <span
                class="color-999"
                style="margin-left: 10px"
              >销量: {{ item.sellNumber }}</span>
            </view>
          </view>
        </view>
      </li>
      <view
        v-if="!list.length"
        class="noResult"
      >
        未匹配到结果，请重新搜索！
      </view>
    </ul>
  </view>
</template>

<script>
import searchBar from '@/components/search-bar/index.vue';
import myTablist from '@/components/my-tablist/index.vue';
import { getDistance } from '@/common/js/util.js';

export default {
  components: {
    searchBar,
    myTablist,
  },
  data() {
    return {
      travelShow: false,
      tripShow: false,
      list: [],
      page: {
        page_size: 10,
        current_page: 1,
        count: 0,
        loading: false,
        finished: false,
      },
      form: {
        name: '',
        city: '',
        // priceSort: 0,
        // number: 1,
        // day: 1
      },
      categoryList: [],
      category: '',
      cateId: '',
      defaultCode: '',
      currLocation: []
    };
  },
  onLoad(e) {
    // this.category = e.category;
    // this.defaultCode = e.category;
    this.form.name = e.name;
    console.log('页面传递的参数', e);
    if (e.cateId) {
      this.cateId = e.cateId;
      this.getCategoryList(e.cateId);
    } else {
      this.queryData();
    }
    if (e.title) {
      uni.setNavigationBarTitle({
        title: e.title,
      });
    }
    this.$store.commit('changeSearchForm', e); // 保存搜索参数
    this.computeDistance();
  },
  // 页面下拉刷新
  onPullDownRefresh() {
    this.list = [];
    this.page.current_page = 1;
    this.queryData('refresh');
  },
  // 页面触底
  onReachBottom() {
    if (this.list.length < this.page.count) {
      this.queryData();
    }
  },
  methods: {
    // search(e) {
    //   console.log('搜索团建列表页', e);
    //   this.form.name = e.inputValue;
    //   this.list = [];
    //   this.page.current_page = 1;
    //   this.queryData();
    // },
    changeNumber(e) {
      this.form.number = e;
    },
    changeDay(e) {
      this.form.day = e;
    },
    priceChange() {
      this.form.priceSort = this.form.priceSort === 0 ? 1 : 0;
    },
    // 列表获取
    queryData(status) {
      uni.showLoading({
        title: '加载中',
      });
      this.page.loading = true;
      const location = this.$store.state.storeLocation || [];
      this.$ajax({
        method: 'get',
        url: '/outing/mobile/goods/search',
        data: {
          codeList: this.category,
          keywords: this.form.name,
          address: this.form.city,
          type: 'BUILD',
          nowLat: location[0] || '',
          nowLng: location[1] || '',
          distanceTag: 1,
          ...this.page,
        },
      }).then((res) => {
        res.data.forEach((item) => {
          if (item.tag) {
            item.tagList = JSON.parse(item.tag);
          } else {
            item.tagList = [];
          }
          if(this.currLocation.length) {
            const dis = getDistance(...this.currLocation, item.lat, item.lng) ;
            item.distance = dis.toFixed(2);
          }
        });
        this.list.push.apply(this.list, res.data);
        this.page.count = res.count;
        this.page.loading = false;
        if (this.list.length >= this.page.count) {
          this.page.finished = true;
        }
        uni.hideLoading();
        this.page.current_page += 1;
        if (status === 'refresh') {
          uni.stopPullDownRefresh();
        }
      });
    },
    changeTab(item) {
      console.log('changeTab', item);
      this.list = [];
      this.page.current_page = 1;
      if (item.code) {
        this.category = item.code;
      } else {
        this.category = this.defaultCode;
      }
      this.queryData();
    },
    getCategoryList(id) {
      this.$ajax({
        method: 'get',
        url: '/outing/mobile/product/ioc/queryCategoryListById',
        data: {
          id,
        },
      }).then((res) => {
        if (res.data) {
          this.categoryList = res.data;
          if(res.data && res.data.length) {
            const val = res.data.map(e => e.code);
            // console.log('cateList', val, String(val), val.join(','));
            this.defaultCode = String(val);
            this.category = String(val);
          }
          this.queryData();
        }
      });
    },
    computeDistance() {
      dd.getLocation({
					type: 0,
					success: (res) => {
						const { longitude, latitude } = res;
            this.currLocation = [latitude, longitude];
					},
					fail(e) {
						if (e && e.error === 11) {
							uni.showToast({
								title: '请开启定位权限'
							});
						} else {
							uni.showToast({
								title: e.errorMessage
							});
						}
					},
				});
    }
  },
};
</script>

<style lang="less" scoped>
.list {
  min-height: 100vh;
  background: #f7f9fb;

  .search {
    background: #fff;
    padding: 30rpx 30rpx 0;
    // margin-bottom: 23rpx;

    .menuList {
      display: flex;
      margin-top: 30upx;
      position: relative;

      .item {
        display: flex;
        // align-items: center;
        margin-right: 10upx;
      }

      .triangle {
        width: 0;
        height: 0;
        border-top: 14upx solid #ccc;
        border-left: 10upx solid transparent;
        border-right: 10upx solid transparent;
        margin: 10upx 14upx 0;

        // transition: all ease .5s;
        &.s {
          border-top: 0;
          border-bottom: 14upx solid #fe7d15;
        }
      }

      .menuSearch {
        position: absolute;
        left: 0;
        top: 40upx;
        background: #fff;
        right: 0;
        padding: 30upx;
        z-index: 99;

        .head {
          display: flex;
          border-bottom: 1px dashed #d1d1d1;
          justify-content: space-between;
          padding-bottom: 16upx;
          margin-bottom: 16upx;
        }

        .btn {
          width: 610upx;
          height: 82upx;
          background: linear-gradient(312deg, #ffc77b 0%, #f78833 100%);
          border-radius: 40px;
          text-align: center;
          line-height: 82upx;
          color: #fff;
          font-size: 32upx;
          font-family: PingFangSC-Semibold, PingFang SC;
          font-weight: 600;
        }
      }
    }

    // .sort {
    //   display: flex;
    //   &-list {
    //     display: flex;
    //     align-items: center;
    //     height: 87rpx;
    //     padding-right: 24rpx;
    //     margin-right: 32rpx;
    //     color: #555;
    //     font-size: 26rpx;
    //     font-weight: 600;
    //     cursor: pointer;
    //     position: relative;
    //     .arr-up {
    //       position: absolute;
    //       top: 25rpx;
    //       right: -10rpx;
    //       border: 12rpx solid transparent;
    //       border-bottom-color: #fe7d15;
    //     }
    //     .arr-down {
    //       position: absolute;
    //       top: 38rpx;
    //       right: -10rpx;
    //       border: 12rpx solid transparent;
    //       border-top-color: #cccccc;
    //     }
    //   }
    // }
  }

  .card {
    overflow: hidden;
    // background: #f7f9fb;

    .noResult {
      padding: 118upx 0;
      text-align: center;
    }

    .card_left {
      margin-right: 20rpx;
    }

    .card_right {
      font-size: 30rpx;
      font-family: PingFangSC-Medium, PingFang SC;
      font-weight: 500;
      color: #333333;
      line-height: 42rpx;
      width: 100%;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
    }

    .title-flex {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
    }

    .distance {
      font-size: 22rpx;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: #999999;
      line-height: 30rpx;
    }

    li {
      padding: 20rpx;
      margin: 0 20rpx 20rpx;
      display: flex;
      background: #fff;
      border-radius: 10rpx;

      .img {
        width: 180upx;
        height: 180upx;
        border-radius: 10upx;
        overflow: hidden;
      }

      h1 {
        font-size: 32upx;
        font-family: PingFangSC-Medium, PingFang SC;
        font-weight: 500;
        color: #333333;
        line-height: 40upx;
        margin: 24upx 0 14upx 0;
      }

      .title {
        line-height: 40upx;
      }

      .tagList {
        overflow: hidden;
        margin: 14upx 0;

        .item {
          display: inline-block;
          margin: 0 10upx 10upx 0;
          padding: 0 14upx;
          background: #fef2e7;
          border-radius: 4upx;
          font-size: 20upx;
          font-family: PingFangSC-Regular, PingFang SC;
          font-weight: 400;
          color: #fe7d15;
        }
      }

      .flex {
        display: flex;
        justify-content: flex-start;
        align-items: flex-end;
      }

      .detail-bottom {
        display: flex;
        justify-content: space-between;
        align-items: flex-end;
      }

      .start-price {
        &:after {
          color: #ff4d00;
          // content: '/人';
        }
      }
    }
  }
}
</style>
